<script setup lang="ts">
  import DynamicForm from '@/components/common/dynamicForm/DynamicForm.vue';
  import { DynamicFormOption, DynamicItem, DynamicSelectOption } from '@/components/types';
  import { useLocale } from '@/locales/useLocale';
  import { useMobile } from '@/hooks/core/useMobile';
  import { computed, ref } from 'vue';
  import { useAuthStore } from '@/store/module/useAuthStore';
  import { IForgotPasswordParam } from '@/api/types';
  import { useRouter } from 'vue-router';
  import { reqSendSms } from '@/api/module/userApi';
  import { ElMessage } from 'element-plus';
  const { t } = useLocale();
  const schema = {
    mobile: 'required',
    pwd: 'required',
    confirmedPassword: 'required|confirmed:@pwd',
    smsCode: 'required',
  };
  const initValues = {
    mobile: '',
    smsCode: '',
    pwd: '',
    confirmedPassword: '',
  };
  const forgotPasswordFormOption = [
    {
      is: DynamicItem.SMSCODE,
      name: 'mobile',
      placeholder: 'message.sys.login.mobilePlaceholder',
      requiredField: true,
      sendSms: (mobile: string) => {
        reqSendSms({ mobile }).then((res) => {
          ElMessage.success({ message: res.msg });
        });
      },
    },
    {
      is: DynamicItem.INPUT,
      name: 'pwd',
      placeholder: 'message.sys.login.passwordPlaceholder',
      requiredField: true,
      type: 'password',
      showPassword: true,
    },
    {
      is: DynamicItem.INPUT,
      name: 'confirmedPassword',
      placeholder: 'message.sys.login.confirmPassword',
      requiredField: true,
      type: 'password',
      showPassword: true,
    },
    {
      is: DynamicItem.INPUT,
      name: 'smsCode',
      placeholder: 'message.sys.login.smsPlaceholder',
      requiredField: true,
    },
  ] as DynamicFormOption[];
  const loading = ref(false);
  const router = useRouter();
  const onSubmit = (values: Recordable, formTool: Recordable) => {
    const authStore = useAuthStore();
    loading.value = true;
    const { confirmedPassword, ...forgotValue } = values;
    authStore.forgotPassword(forgotValue as IForgotPasswordParam, () => {
      formTool.resetForm();
      loading.value = false;
    });
  };
  const isMobile = useMobile();
  const size = computed(() => {
    return isMobile.value ? 'default' : 'large';
  });
</script>

<template>
  <DynamicForm
    as="ElForm"
    :validation-schema="schema"
    :initialValues="initValues"
    :options="forgotPasswordFormOption"
    @on-submit="onSubmit"
    :size="size"
    submit-content="message.sys.login.forgetFormTitle"
    :loading="loading"
    animate-class="enter-x"
  />
</template>

<style lang="scss"></style>
